<template>
	<div class='user-info'>
		<!-- 头像 & 昵称 & 邮箱 -->
		<Tag
			bgColor="#FBFBFB"
			color="#003E34"
			width="388px"
			height="408px"
			size="22"
		>
			<div style="color: rgba(0, 62, 52, 0.8);">
				<img
					class="avatar"
					:src="myInfo.avatarLarge"
				>
				<div class="name">{{myInfo.name}}</div>
				<div
					v-if="myInfo.age"
					class="age"
				>
					{{myInfo.age}}岁
				</div>
				<div class="email">{{myInfo.email}}</div>
			</div>
		</Tag>
		<!-- 收藏 & 点赞 -->
		<footer>
			<Tag
				bgColor="#FBFBFB"
				color="#003E34"
				width="182px"
				height="230px"
			>
				<div>
					<div class="name">收藏</div>
					<div class="value">4</div>
				</div>
			</Tag>
			<Tag
				style="margin-left: 24px;"
				bgColor="#FBFBFB"
				color="#003E34"
				width="182px"
				height="230px"
			>
				<div>
					<div class="name">点赞</div>
					<div class="value">11</div>
				</div>
			</Tag>
		</footer>
	</div>
</template>

<script>
export default {
  data() {
    return {
      myInfo: this.$storeGet('getMyInfo')
    }
  },
  created() {
    console.log(this.myInfo)
  },
  methods: {

  }
}
</script>

<style lang='scss' scoped>
.user-info {
  .avatar {
    width: 216px;
    margin-bottom: 25px;
  }

  .name,
  .email,
  .age {
    line-height: 25px;
  }

  footer {
    display: flex;
    margin-top: 24px;

    .name {
      font-size: 24px;
      color: rgba(0, 62, 52, 0.6);
    }

    .value {
      margin-top: 30px;
      font-size: 45px;
      color: $primary2;
    }
  }
}
</style>
